<template>
	<el-container>
	  <el-header><el-button type="primary" @click="add_bt(0)">添加</el-button></el-header>
	  <el-main>
		  <el-table
			    :data="list"
			    border
			    style="width: 100%"
				 :stripe="true">
				 <el-table-column
				   prop="sort"
				   label="排序"
				  >
				 </el-table-column>
				 
				 <el-table-column
				   prop="name"
				   label="名称"
				  >
				 </el-table-column>
				 
				 
				 <el-table-column label="图标">
				 　　<template slot-scope="scope">
				 	<el-image v-if="scope.row.icon"
				 	    class="head_pic"
				 	    :src="getimg+scope.row.icon" >
				 	</el-image>
				 　　</template>
				 </el-table-column>
				 
				 <el-table-column label="背景">
				 　　<template slot-scope="scope">
				 	<el-image v-if="scope.row.background"
				 	    class="head_pic"
				 	    :src="getimg+scope.row.background" >
				 	</el-image>
				 　　</template>
				 </el-table-column>

			   
				
				<el-table-column
				  prop="lat"
				  label="lat"
				 >
				</el-table-column>
				
				<el-table-column
				  prop="lng"
				  label="lng"
				 >
				</el-table-column>
				
			    <el-table-column
			      fixed="right"
			      label="操作"
			     >
			      <template slot-scope="scope">
			        <el-button @click="edit_bt(scope.row)" type="text" size="small">编辑</el-button>
			        <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
			      </template>
			    </el-table-column>
			  </el-table></el-main>
	  <el-footer>
		  <el-pagination
			style="margin-top: 50px;" background layout="prev, pager, next" :total="total"
				:page-size="size" @current-change="jump_page" :current-page="currPage"
			>
			</el-pagination>
		</el-footer>
		<el-dialog :title="title[type]" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
			 <el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				
				<el-form-item label="排序">
					<el-input v-model="form.sort" type="number"></el-input>
				</el-form-item>
				
				<el-form-item label="背景图片">
					<Pic :url="form.background" index="background" @get_url="get_url" @delImg="delimg"></Pic>
				
				</el-form-item>
				
				<el-form-item label="图标">
					<Pic :url="form.icon" index="icon" @get_url="get_url" @delImg="delimg"></Pic>
				
				</el-form-item>
				
				<el-form-item label="坐标">
					<el-input v-model="form.lng+','+form.lat"></el-input>
				</el-form-item>
				<el-form-item label="地图">
					 <Amap :position="[form.lng||105.30504,form.lat||27.29847]" :center="[form.lng||105.30504,form.lat||27.29847]" zoom="18" :icon="icon" :choose_position="get_position"></Amap>
				</el-form-item>
				
				<el-form-item label="区域介绍">
					<Edit :contents="form.content" :content_back="get_content"></Edit>
				</el-form-item>
				
			
				
			</el-form>
		
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose()">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span> 
		</el-dialog>
	</el-container>
	
	

		
	
	
</template>
<script>
import Pic from '../../components/UploadPicOne.vue'
import {Api_url} from '../../api/config.js'
import Amap from '../../components/amap.vue'
import Edit from '../../components/quill-editor.vue'

export default {
  data() {
    return {
		 form:{
			 name:'',
			 background:'',
			 icon:'',
			 lat:'',
			 lng:'',
			 content:'',
			 sort:0
		 },
		 goods:[],
		 title:['添加','编辑'],
		 total:0,
		 formLabelWidth:'120px',
		 size:6,
		 getimg:this.$get_img,
		 currPage:1,
		icon:this.$get_img+'public/sys/icon/position.png',
		 total:0,
		 list:[],
		 dialogVisible:false,
		 drawer:false,
		 type:0,//0添加1编辑
		 
    }
  },
  components: {
  	Pic,
	Amap,
	Edit
  },
  mounted(){
	this.get_all()
  },
  methods: {
	  get_content(e){
		this.form.content=e  
	  },
	  get_url(e){
		console.log(e)  
		this.form[e.index]=e.url
	  },
	  get_position(e){
		console.log(e)  
		this.form.lng=e[0]
		this.form.lat=e[1]
		console.log(this.icon)
	  },
	  get_all(){
		 this.$model.get("/cms/house_area/get?num="+this.size+"&page="+this.currPage).then(res=>{
			 if(res.code==200){
				 this.list=res.data
				 this.total=res.total
			 }
			 
			 
		 })
	  },
	  

		submit(){
			this.form.sort=parseInt(this.form.sort)
			if(this.type==0){
				if(this.form['id']){
					delete this.form['id']
				}
				this.$model.post("/cms/house_area/create",this.form).then(res=>{
					if(res.code==200){
						this.$message({
						         message: '添加成功',
						         type: 'success'
						       });
						this.dialogVisible=false
						this.clear_data()
						this.get_all()
					}
				})
			}
			else{
				this.$model.post("/cms/house_area/update",this.form).then(res=>{
					if(res.code==200){
						this.$message({
						         message: '更新成功',
						         type: 'success'
						       });
						this.dialogVisible=false
						this.clear_data()
						this.get_all()
					}
				})
			}
		},
		edit_bt(item)
		{
			this.form=item
			this.type=1
			this.dialogVisible=true
		/* 	localStorage.setItem("edit_goods",JSON.stringify(item))
			this.$router.push({ path: '/house/add_house' }) */
		},
		get_img(e){
			this.img_list=e
			this.form.img=e.id
			this.drawer=false
		},
		back(e){
			this.drawer=false
		},
		//分页跳转
		jump_page(e) {
			this.currPage=e
			this.get_all()

		},
		del(id){
			this.$confirm('确认删除？', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
						this.$model.put("/cms/house_area/del?id="+id).then(res=>{
							if(res.code==200){
								this.$message({
								         message: '已删除',
								         type: 'success'
								       });
								this.handleClose()	
								this.currPage=1
								this.get_all()
							}
						})
			        
			        }).catch((error) => {
						console.log(error)
			          this.$message({
			            type: 'info',
			            message: '已取消删除'
			          });          
			        });
	
		},
		//添加事件
		add_bt()
		{
			this.type=0
			this.dialogVisible=true	
		},
		//关闭事件
		handleClose()
		{
		
			this.dialogVisible=false
			
		},
		delimg(e){
			this.$model.get("/cms/common/del_img?url="+this.form[e]).then(res=>{
				if(res.code==200){
					this.form[e]=''
				}
			})
			
		},
		choose_pic() {
			this.drawer = !this.drawer	
		},
		clear_data()
		{
			this.form.name=''
			this.form.background=''
			this.form.icon=''
			this.form.sort=0
			this.form.lat=''
			this.form.lng=''
			this.form.content=''
			this.get_all()

		}
  },
  created() {
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {
  }
}
</script>
<style>
	.head_pic{
		width: 120px;
		height: 120px;
	}
	
	.picA {
		width: 148px;
		height: 148px;
		background-color: #FBFDFF;
		border: 1px dashed #C0CCDA;
		border-radius: 6px;
		box-sizing: border-box;
		vertical-align: top;
		text-align: center;
		margin: 6px;
	}
	
	.img {
		width: 144px;
		height: 144px;
		border: 1px solid #BFBFBF;
		border-radius: 3px;
	}
</style>
